<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href=@{'/public/stylesheets/css/style.css'} rel="stylesheet" type="text/css" />

<title>Insert title here</title>

<script type="text/javascript">
   function mostrar(){
	   
	   
   }

</script>

<style type="text/css">
#form_pedido{
       position:relative;
       
       }
       
.lado_esquerdo{
      position:absolute;
      background-color:#E0FFFF;
      width:30%;
      margin-top:10px;
      height:300px;
      border-style: dashed;
      font-family: Segoe UI;
      }
      
#lado_direito{
      position:absolute;
      background-color:#E0FFFF;
      margin-left:32%;
      height:520px;
      width:480px;
      margin-top:10px;
      border-style: dashed;
      text-align: center;
      }      
      
table{
   postion:relative;
   text-color:black;
   top:50px;
   z-index:1000;
   }
   
td,th{
   color:black;
   top:50px;
   }
   
#carrinho{
	color:white;
	position: relative;
	margin:0 auto; 
	margin-left: 50%px;
	font-family: Segoe UI;
	text-align: right;
	z-index: 0;	
	top:50px;
}

#area_cadastro{
    position:absolute;
    background-color:#E0FFFF;
    border-style:dashed;
    margin-top:320px;
    width:30%;
    height:210px;
    
    }

#botao_enviar{
    position:relative;
    top:10px;
    height:50px;
    text-shadow:  green;
    
    }
#botao_continuar_comprando{
     position:relative;
     top:-40px;
     height:50px;
     left:120px;
     
     }
#botao_cadastrar{
     color:green;
     width:100%;
     height:200px;
     }
   

             

  

</style>

</head>
<body>
  
    <div id="logo"><img src="/public/images/images_sites/donut_logo.png" height="120" width="120"></div>
    <div id="nome_logo"><img src="/public/images/images_sites/nome_logo.png"></div>

    #{if cl==null}
    <div class="lado_esquerdo">
      <div id="form_pedido" >
            <form action= @{Application.finalizarPedido()} method="get">
                <label  for="nome">Nome</label> <input type="text" name="nome" id="nome"><br>
                <label for="telefone">Telefone</label> <input type="text" name="telefone" id="telefone"><br>
                <label for="rua">Rua</label> <input type="text" name="rua" id="rua"><br>
                <label for="numero">Numero</label>: <input type="text" name="numero" id="numero"><br>
                <label for="bairro">Bairro</label> <input type="text" name="bairro" id="bairro"><br>
                <label for="complemento">Complemento</label><input type="text" name="complemento" id="complemento"><br>
                <label for="email">e-mail</label> <input type="text" name="email" id="email"><br>
                <input id="botao_enviar" type="submit" value="Enviar Pedido">
            </form>
            <form action=@{Application.inicial()} method="get">
                 <input id="botao_continuar_comprando" type="button" value="comprar mais!!!">
            </form>
      </div> <!-- class=form_cadastro_cliente -->
      </div> <!-- esquerdo -->
      #{/if}
      #{else}
       <div class="lado_esquerdo">
           <p "black"> Ola ${cl}</p>
           <form action=@{Application.finalizarPedido()} method="get">
              <input type="submit" name="submeter" value="Finalizar Pedido">
               
           </form>
           
          
       
       
       </div>
      
      
      
      #{/else}
      
      <div id="lado_direito">
          <div id="carrinho">
            <table rules="groups" width="100%">
                  <tr> <th>Sabor</th> <th>Quantidade</th> <th>Preço</th> </tr>
              #{list items:itens, as: 'item'}
                  <tr>
                     <td >${item.getNome()}</td><td>x ${item.getQuantidade()}</td><td>R$ ${String.format("%.2f",item.getValorTotal())}</td>
                  </tr>

              #{/list}

            </table>
         <p style="color:black;"> Total:  ${String.format("%.2f",valor)} </p>
       </div>
       
       


      </div>

      <div id="area_cadastro">
          <form action=@{Application.cadastro_cliente()} method="get">
               <input id="botao_cadastrar" type="submit" value="cadastre-se agora!!!">
          
          </form>
     
     
     </div>
     
     
           
</body>
</html>